<template>
  <div id="header">
    <div id="top" >
      <div class="item">
        <img src="https://www.kugou.com/common/images/kugou_white.png" alt="酷狗音乐" width="200px;" height="50px;">
      </div>
      <div class="item" >
        <el-input v-model="input" placeholder="歌手、歌曲名称" @keyup.enter.native="search()"></el-input>
      </div>
      <div class="item" >
       <span v-for="(item,index) in link" :key="index" class="linkItem">
        <a :href="item.url" target="_blank">{{item.title}}</a>
      </span>
      </div>
      <div class="item">
        <el-button type="primary" plain>登录</el-button>
      </div>
    </div>
    <div id="down">
      <ul>
        <li v-for="(element,index) in item" :key="index" :class="{'select':selectIndex == index}" @click="goto(element,index)">
          <span>{{element.title}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "header",
  data(){
    return{
      input:'',
      link:[
        {title:'音乐人',url:'https://musician.kugou.com/?imusic=pc'},
        {title:'主播电台',url:'https://www.kugou.com/fmugc-v2/dist/index.html#/index'},
        {title:'开放电台',url:'https://open.kugou.com/'},
        {title:'VIP会员',url:'http://vip.kugou.com/'}
      ],
      item:[
        {title:'首页',url:'/'},
        {title:'电台',url:'/radios'},
        {title:'MV',url:'/mv'},
        {title:'歌单',url:'/musicList'},
        {title:'歌手',url:'/singer'},
        {title:'播放列表',url:'/play'}
      ],
      selectIndex:0,
    }
  },
  methods:{
    search(){
        this.$router.push({
            name:'search',
            params:{
                id:this.input,
            }
        })
    },
    goto(element,index){
        this.selectIndex = index;
        this.$router.push({path:element.url});
    }
  },
}
</script>

<style scoped>
  #top{
    width:100%;
    background:deepskyblue;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #header .item{
    margin-left:30px;
  }
  #header .linkItem{
    margin-left:20px;
  }
  #header.linkItem a{
    font-size:15px;
    color:white;
  }
  ul{
    width:100%;
    height:50px;
    box-shadow: 0px 0px 15px gainsboro;
    display: flex;
    justify-content: center;
  }
  ul li{
    width:100px;
    height:40px;
    line-height:40px;
    float:left;
    margin:5px 20px 5px 20px;
    list-style: none;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
  }
  #header .select{
    background:deepskyblue;
    font-size:18px;
    color:white;
  }
  #header .select a{
    color:white;
  }
</style>
